
<!DOCTYPE html>
<html lang="en">
<head>
<title>刚刚好</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- <link href="css/font-awesome.css" rel="stylesheet">  -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!-- //js -->
<!-- <link href='//fonts.googleapis.com/css?family=Oleo+Script:400,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<link href="//fonts.googleapis.com/css?family=Oswald:300,400,700" rel="stylesheet"> -->

<!-- <script type="text/javascript" src="js/easing.js"></script> -->

</head>
	
<body>
<!-- banner -->
	<div class="banner-figures">
		<div class="banner">
			<div class="container banner-drop">
				<div class="header">
					<div class="header-left logo">
						<h1><a href="index.html">Elegant Resume</a></h1>
					</div>
					<div class="header-right">
						<nav>
						  <ul>
							<li class="active">
								<a href="index.html" class="active"><span>主页</span></a>
							</li>
							<li>
								<a href="#about" class="scroll"><span>关于</span></a>
							</li>
							<li>
								<a href="#experience" class="scroll"><span>经验</span></a>
							</li>
							<li>
								<a href="#projects" class="scroll"><span>计划</span></a>
							</li>
							<li>
								<a href="#contact" class="scroll"><span>联系</span></a>
							</li>
						  </ul>
						</nav>
						<div class="menu-icon animated wow zoomIn" data-wow-duration="1000ms" data-wow-delay="800ms"><span></span></div>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="name" >
					<h2>Cui Xu Feng</h2>
					<p> Web Designer & Developer</p>
				</div>
				<div class="social-icons animated wow bounceInDown" data-wow-duration="1000ms" data-wow-delay="800ms">
					<ul class="top-links">
						<li><a href="#"><i class="fa fa-facebook"></i></a></li>
						<li><a href="#"><i class="fa fa-twitter"></i></a></li>
						<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
						<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
					</ul>
				</div>
			</div>
							<div class="banner-btm-grid-w3ls">
		<div class="banner-left-wthree">
			<img src="http://a3.qpic.cn/psb?/V10CA42824VThb/ckg1N*2GC0IqPNH5b4NbnUMNhYp*e64nnCp2RvVhYz4!/b/dB8BAAAAAAAA&bo=gAKAAoACgAIRBzA!&rf=viewer_4" alt=" " class="img-responsive">
			<ul class="address">
					
					<li>
							<ul class="address-text">
								<li><b>NAME</b></li>
								<li>: I'M Cui Xu</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>D.O.B</b></li>
								<li>: 25-03-1997</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>ADDRESS </b></li>
								<li>: 345 Setwant natrer,Washington,US.</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>E-MAIL </b></li>
								<li><a href="810536913@qq.com">: 810536913@qq.com</a></li>
							</ul>
						</li>
						
					</ul>
		</div>
		<div class="banner-right-w3-agileits" style="height:333px;padding: 0;">
			<video style="width:100%; height:100%;" src="images/薛之谦 - 刚刚好.mp4" controls></video>
		</div>
		<div class="clearfix"></div>
	</div>
		</div>
<script>
	(function($){
		 $(".menu-icon").on("click", function(){
			$(this).toggleClass("open");
			$(".container").toggleClass("nav-open");
			$("nav ul li").toggleClass("animate");
		 });
				  
		})(jQuery);
</script>
		

<!-- //banner -->
<!-- about -->
<div class="about" id="about">
	<div class="container">
		<span class="about-top-w3">Who I am?</span>
		<h4 class="title-w3ls">关于我</h4>
		<h5 class="sub">自己的简介</h5>
		<p class="para-w3-agile">Ut in ligula sollicitudin, auctor elit vel, mollis tortor. Nullam id magna in eros mollis porttitor vel et eros.Phasellus sed iaculis nibh, non suscipit tortor. Aenean ante massa, lobortis et dolor eget, sollicitudin luctus arcu. Donec eros tortor, ultrices in lectus quis, aliquet commodo lectus. </p>
		<p class="para-w3-agile">Phasellus facilisis, est et tempus aliquet, odio purus pretium felis, sit amet imperdiet tortor ex vel purus.Nulla mattis venenatis rutrum. Nunc molestie elit tellus, id iaculis lectus feugiat id. </p>
	</div>
</div>
<div class="projects" id="projects">
	<div class="container">
	<span class="about-top-w3">安哥拉的情话</span>
		<h4 class="title-w3ls">经典感悟</h4>
		<div class="news-bottom">
				<div class="news-one-wthree-agile">
					<div class="col-md-6 news-left">
						        <div class="biseller-column">
										<a class="lightbox" href="#one">
											<img src="images/p1.jpg" alt=""/>
										</a> 
										<div class="lightbox-target" id="one">
										 <img src="images/p1.jpg" alt=""/>
										 <p class="pop">Duis bibendum pellentesque nisi eget volutpat. Nunc rhoncus ultrices lectus.Aliquam eu dui quis orci ultrices eleifend ut non massa.non suscipit leo fringilla non suscipit leo fringilla molestie</p>
										   <a class="lightbox-close" href="#"> </a>
											
											<div class="clearfix"> </div>
											
										</div>
							   </div>

					</div>	
					<div class="col-md-6 news-right" style="height:376.78px;"> 
					<a href="#one"><h4>放弃一个人是什么感觉？</h4></a>
						<p class="para-w3-agile">放弃一个喜欢的人是什么感觉？”“就像一把火烧了你住了很久的房子，你看着那些残骸和土灰的绝望，你知道那是你的家，但是已经回不去了”没关系你也不用给我机会，反正我还有一生可以浪费。</p>	
					</div>	
					<div class="clearfix"> </div>	
				</div>
				<div class="news-one-wthree-agile">
					<div class="col-md-6 news-right" style="height:395.78px;"> 
						<a href="#three"><h4>爱情的残忍</h4></a>
						<p class="para-w3-agile">我一直觉得，爱情最残忍的地方在于，从它发生的最初就已经到达巅峰。那种怦然心动，那种想要收割对方的强烈欲望，那种迫不及待想要到达未来的期许，都在恋爱的开始就已经被预支，从此往后，再怎么走都是下坡路。</p>	
					</div>	
					<div class="col-md-6 news-left">
						 <div class="biseller-column">
										<a class="lightbox" href="#three">
											<img src="images/p2.jpg" alt=""/>
										</a> 
										<div class="lightbox-target" id="three">
										 <img src="images/p2.jpg" alt=""/>
										 <p class="pop">Duis bibendum pellentesque nisi eget volutpat. Nunc rhoncus ultrices lectus.Aliquam eu dui quis orci ultrices eleifend ut non massa.non suscipit leo fringilla non suscipit leo fringilla molestie</p>
										   <a class="lightbox-close" href="#"> </a>
											
											<div class="clearfix"> </div>
										</div>
							</div>

					</div>						
					<div class="clearfix"> </div>	
				</div>	
			  <div class="news-one-wthree-agile">
					<div class="col-md-6 news-left">
							<div class="biseller-column">
										<a class="lightbox" href="#two">
											<img src="images/p3.jpg" alt=""/>
										</a> 
										<div class="lightbox-target" id="two">
										 <img src="images/p3.jpg" alt=""/>
										 <p class="pop">Duis bibendum pellentesque nisi eget volutpat. Nunc rhoncus ultrices lectus.Aliquam eu dui quis orci ultrices eleifend ut non massa.non suscipit leo fringilla non suscipit leo fringilla molestie</p>
										   <a class="lightbox-close" href="#"> </a>
											
											<div class="clearfix"> </div>
										</div>
							</div>

					</div>	
					<div class="col-md-6 news-right" style="height:386px;"> 
					<a href="#two"><h4>爱情结局</h4></a>
						<p class="para-w3-agile">在这个世界上只有两种，一种是爱情的果实--婚姻。另外一种便是相忘于江湖。我们终究成了爱情的残次品，被遗落在地球的两端。日出而作，日落而栖，朝霞依然把万丈光芒洒遍大地，一样的天空不一样的心境，白净如纸的生活，画满了思念，我如此撕心裂肺的想你，可你又在做什么呢？祈盼有朝一日一个奇迹出现在我的身边，若是需要在佛前祈求千遍万遍，哪怕滴水石穿，只要有那怕微弱的一点希望也好啊。</p>	
					</div>	
					<div class="clearfix"> </div>	
				</div>	
				<div class="news-one-wthree-agile">
					<div class="col-md-6 news-right" style="height:428px;"> 
						<a href="#four"><h4>为什么相爱的人总要相互折磨?</h4></a>
						<p class="para-w3-agile">为什么相爱的人总要相互折磨，大概是因为太爱了吧，太过爱你所以幼稚的用各种笨拙的方法证明我对你的爱，太过爱你所以千方百计去考验你的真心，一开始他冲你笑一下你就能幸福的睡不着觉，后来他付出的越来越多而你却再也没有满足过</p>	
					</div>	
					<div class="col-md-6 news-left">
						 <div class="biseller-column">
										<a class="lightbox" href="#four">
											<img src="images/p4.jpg" alt=""/>
										</a> 
										<div class="lightbox-target" id="four">
										 <img src="images/p4.jpg" alt=""/>
										 <p class="pop">Duis bibendum pellentesque nisi eget volutpat. Nunc rhoncus ultrices lectus.Aliquam eu dui quis orci ultrices eleifend ut non massa.non suscipit leo fringilla non suscipit leo fringilla molestie</p>
										   <a class="lightbox-close" href="#"> </a>
											
											<div class="clearfix"> </div>
										</div>
							</div>

					</div>						
					<div class="clearfix"> </div>	
				</div>	
				 <div class="news-one-wthree-agile">
					<div class="col-md-6 news-left">
							<div class="biseller-column">
										<a class="lightbox" href="#five">
											<img src="images/p5.jpg" alt=""/>
										</a> 
										<div class="lightbox-target" id="five">
										 <img src="images/p5.jpg" alt=""/>
										 <p class="pop">Duis bibendum pellentesque nisi eget volutpat. Nunc rhoncus ultrices lectus.Aliquam eu dui quis orci ultrices eleifend ut non massa.non suscipit leo fringilla non suscipit leo fringilla molestie</p>
										   <a class="lightbox-close" href="#"> </a>
											
											<div class="clearfix"> </div>
										</div>
							</div>

					</div>	
					<div class="col-md-6 news-right" style="height:383px;"> 
					<a href="#five"><h4>要懂得珍惜</h4></a>
						<p class="para-w3-agile">不是每个人，在你后悔以后都还能站在原地等你，不是每个人，都能在被伤过后可以选择忘记既往不咎。我不好，但只有一个，珍惜也好，不珍惜也罢，如果哪天你把我弄丢了，我不会再让你找到我。人的感情就像牙齿，掉了就没了，再装也是假的，友情也好，爱情也罢，我若离去，后会无期</p>	
					</div>	
					<div class="clearfix"> </div>	
				</div>
				<div class="clearfix"> </div>				
			</div>	
	</div>
</div>
<!-- //projects -->
<!-- contact -->
<div class="contact" id="contact">
	<div class="container">
	<span class="about-top-w3">Send me a message</span>
		<h4 class="title-w3ls">Contact Me</h4>
		<div class="col-md-5 contact-agileits-w3layouts">
		<form action="#" method="post">
				<input type="text" name="Your Name" placeholder="名字" required="" />
				<input type="email" name="Your Email" placeholder="邮箱" required="" />
				<input type="text" Name="Phone Number" placeholder="号码" required=""/>
				<textarea name="留言" placeholder="Message" required=""></textarea>
				<input type="submit" value="提交">
			</form>
			<h5 class="sub">Looking for Address</h5>
			<p><span>Location</span> : 345 Setwant natrer,Washington,US.</p>
			<p><span>Phone</span> : 13834389571</p>
			<p><span>Email</span><a href="810536913@qq.com"> : 810536913@qq.com</a></p>
		</div>


		<div class="col-md-7 contact-map-right">
		<div id="map"></div>

			<!-- Map-JavaScript -->
			<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>        
			<script type="text/javascript">
				google.maps.event.addDomListener(window, 'load', init);
				function init() {
					var mapOptions = {
						zoom: 11,
						center: new google.maps.LatLng(40.6700, -73.9400),
						styles: [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}]
					};
					var mapElement = document.getElementById('map');
					var map = new google.maps.Map(mapElement, mapOptions);
					var marker = new google.maps.Marker({
						position: new google.maps.LatLng(40.6700, -73.9400),
						map: map,
					});
				}
			</script>
		<!-- //Map-JavaScript -->

		</div>
	</div>
</div>
<!-- //about -->

	<div class="footer">
		<div class="container">
			<p>© 2017 Elegant Resume. All rights reserved | Design by <a href="https://user.qzone.qq.com/810536913/infocenter?ptsig=3uLh77wbsPOuPwiMSoctbau6dgp0HvEoPTyANP5PPno_">XUXUXU</a></p>
		</div>
	</div>
<!-- //footer -->
<script src="js/bars.js"></script>

<!-- here stars scrolling icon -->
	
<!-- //here ends scrolling icon -->
</body>
</html>